<template>
  <div class="createDemand login">
    <div class="login_content">
      <div class="content">
        <div class="login_field">
          <van-cell-group>
            <van-field
              v-model="select.type"
              center
              is-link
              readonly
              v-if="route.query.id"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求类型</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.type"
              center
              is-link
              readonly
              @click="showType"
              v-else
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求类型</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.title"
              center
              :readonly="route.query.id ? true : false"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求名称</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.num"
              center
              :readonly="route.query.id ? true : false"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求数量</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.address"
              center
              is-link
              readonly
              v-if="route.query.id"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求地址</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.address"
              center
              is-link
              readonly
              @click="showCity"
              v-else
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求地址</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.expire_time"
              center
              is-link
              readonly
              @click="showExpireTime"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求有效期</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.from"
              center
              is-link
              readonly
              v-if="route.query.id"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求来源</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.from"
              center
              is-link
              readonly
              @click="showSource"
              v-else
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">需求来源</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <div class="desc">
              <div class="content3 font400 color3">
                需求描述
              </div>
              <van-field
                class="textarea"
                v-model="form.desc"
                type="textarea"
                :autosize="{ minHeight: 120 }"
                :readonly="route.query.id ? true : false"
                placeholder="请具体描述下您的需求，需求越具体效率越高哦"
              />
            </div>
          </van-cell-group>
          <UploadImg
            :file-list="fileList"
            :count="form.morepic.length || 4"
            :type="2"
            @uploaderImgs="uploaderImgs"
            @detaleImgs="detaleImgs"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        @click="submit"
        class="agree font400 content3 color4"
      >
        {{ form.id ? '修改需求' : '发布需求' }}
      </div>
    </div>
  </div>
  <Choose
    :columns="columns"
    :visible="visible"
    :type="type"
    @closeDialog="closeDialog"
    @confirmValue="confirmValue"
  />
  <DatetimePicker
    :min-date="minDate"
    :max-date="maxDate"
    :date-visible="dateVisible"
    :type="type"
    :current-date="currentDate"
    @closeDate="closeDate"
    @confirmDate="confirmDate"
  />
  <City
    @confirm="confirm"
    @canleCity="canleCity"
    :visible-city="visibleCity"
  />
</template>

<script setup lang="ts">
import moment from 'moment'
import { Toast, Dialog } from 'vant'
import { demandAdd, getDemandType, demandDetail, demandEdit } from '@/api/index'
import { ref, onMounted, onUnmounted, defineAsyncComponent, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const route = useRoute()
const store = useStore()
const Choose = defineAsyncComponent(() => import('@/components/Choose/index.vue'))
const DatetimePicker = defineAsyncComponent(() => import('@/components/DatetimePicker/index.vue'))
const City = defineAsyncComponent(() => import('@/components/City/index.vue'))
const UploadImg = defineAsyncComponent(() => import('@/components/UploadImg/index.vue'))
const visible: any = ref(false)
const visibleCity: any = ref(false)
const dateVisible: any = ref(false)
const columns: any = ref([])
const type: any = ref(0)
const currentDate: any = new Date()
const fileList: any = ref([])

// interface test {
//   type: any;
//   title: string;
//   desc: string;
//   expire_time: any;
//   morepic: any;
//   from: any;
//   num: any;
//   province_id: any,
//   city_id: any
// }

onMounted(() => {
  document.body.style.background = '#fff'
})

onUnmounted(() => {
  document.body.style.background = '#f7f7f7'
})

const minDate = computed(() => {
  const curDate = (new Date()).getTime()
  const one = 7 * 24 * 3600 * 1000
  const oneYear = curDate + one
  return new Date(oneYear)
})

const maxDate = computed(() => {
  const curDate = (new Date()).getTime()
  const one = 180 * 24 * 3600 * 1000
  const oneYear = curDate + one
  return new Date(oneYear)
})

const select:any = ref({
  type: '',
  num: '',
  from: '',
  address: ''
})

const form:any = ref({
  type: '',
  title: '',
  desc: '',
  expire_time: '',
  morepic: [],
  from: '',
  num: '',
  province_id: '',
  city_id: ''
})

const getData = async () => {
  form.value = await demandDetail({ demand_id: route.query.id })
  select.value.type = form.value.type
  select.value.from = form.value.from === 1 ? '本公司需求' : '代发布需求'
  select.value.address = form.value.address
  form.value.desc = form.value.desc.replace(/(<br\/>|<br>|<BR>|<BR\/>)/g, '\n')
  form.value.expire_time = moment(form.value.expire_time).format('YYYY-MM-DD')
  form.value.type = form.value.type_id
  form.value.morepic.forEach((item:any) => {
    fileList.value.push({
      url: item
    })
  })
}
getData()

const showType = async () => {
  // columns.value = ['test1', 'test2']
  columns.value = await getDemandType({ type: 'demand', is_all: 0 })
  type.value = 1
  visible.value = true
}

const showSource = () => {
  columns.value = ['本公司需求', '代发布需求']
  type.value = 4
  visible.value = true
}

const showExpireTime = () => {
  type.value = 2
  dateVisible.value = true
}

const closeDialog = () => {
  visible.value = false
}

const closeDate = () => {
  dateVisible.value = false
}

const confirmDate = (val: any) => {
  form.value.expire_time = moment(val).format('YYYY-MM-DD')
  dateVisible.value = false
}

const confirmValue = (val: any, type: any) => {
  if (type === 1) {
    select.value.type = val.name
    form.value.type = val.id
  } else if (type === 4) {
    select.value.from = val
    columns.value.forEach((item:any, idnex:any) => {
      if (val === item) {
        form.value.from = Number(idnex + 1)
      }
    })
  } else if (type === 5) {
    select.value.type = val
  }
  visible.value = false
}

// 显示城市
const showCity = () => {
  visibleCity.value = true
}

// 选中城市
const confirm = (list: any, value: any) => {
  select.value.address = list.join(' ')
  form.value.province_id = value[0]
  form.value.city_id = value[1]
}

const canleCity = (value: any) => {
  visibleCity.value = value
}

const uploaderImgs = (val:any, type:any) => {
  console.log(val)
  if (type === 2) {
    form.value.morepic.push(val)
  }
}

const detaleImgs = (i:any, detail:any) => {
  form.value.morepic.splice(detail.index, 1)
}

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const submit = async () => {
  try {
    if (route.query.id) {
      await demandEdit({ ...form.value, demand_id: route.query.id })
      Dialog.alert({
        title: '温馨提示',
        message: '您的需求已提交至后台审核，请耐心等待，结果将通过公众号告知您'
      }).then(() => {
        router.push({ path: '/demand/details', query: { id: route.query.id } })
      })
    } else {
      await demandAdd({ ...form.value })
      Dialog.alert({
        title: '温馨提示',
        message: '您的需求已提交至后台审核，请耐心等待，结果将通过公众号告知您'
      }).then(() => {
        router.push('/demand')
      })
    }
  } catch (error:any) {
    Toast(error.message)
  }
}

</script>

<style lang="less" scoped>
body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 240px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.createDemand {
  padding: 15px 30px 80px;
  .leftw {
    width: 80px;
    display: inline-block;
  }
  .line {
    margin: 0 30px;
  }
  .desc {
    background-color: #f7f7f7;
    padding: 15px;
    padding-left: 15px;
    border-radius: 5px;
    .content3 {
      margin-bottom: 15px;
    }
  }
  .uploaderTop{
    margin-top: 10px;
  }
  .uploader {
    width: 75px;
    height: 75px;
    background: #f7f7f7;
    // border-radius: 5px;
    text-align: center;
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 13px;
    }
  }
}

@media (min-width: 750px) {
  body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 375px;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 240px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.createDemand {
  padding: 15px 30px 80px;
  .leftw {
    width: 80px;
    display: inline-block;
  }
  .line {
    margin: 0 30px;
  }
  .desc {
    background-color: #f7f7f7;
    padding: 15px;
    padding-left: 15px;
    border-radius: 5px;
    .content3 {
      margin-bottom: 15px;
    }
  }
  .uploaderTop{
    margin-top: 10px;
  }
  .uploader {
    width: 75px;
    height: 75px;
    background: #f7f7f7;
    // border-radius: 5px;
    text-align: center;
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 13px;
    }
  }
}
}
</style>
